<template>
	<div v-loading="loading"  element-loading-text="拼命加载中" style="width: 60%; margin-left: 20%; margin-top: 20px;margin-bottom: 20px;">
		<div class="ui link cards">
			<div class="card" v-for="(item,index) in blog_friends" :key="index">
				<div class="image">
				  <img :src="item.friend_image" style="height: 250px;">
				</div>
				<div class="content">
				  <div class="header"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">{{item.friend_theme}}</font></font></div>
				  <div class="description"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
					{{item.friend_introduce}}
				  </font></font></div>
				</div>
				<div class="extra content">
				  <span class="right floated"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
					添加时间:{{item.time_}}
				  </font></font></span>
				</div>
				<button class="ui primary button" @click="Tosee(item.friend_url)"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
				  去看看
				</font></font></button>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				blog_friends:[
					//{friend_url:"https://www.tcefrep.site/#/archives",time_:"2021-12-23 12:23:56",friend_theme:"博客主题",friend_introduce:"这是简介",friend_image:"https://images.unsplash.com/photo-1633114073219-8c81a6bdb356?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"},
					],
				loading: true
			}
		},
		methods:{
			Tosee(item){
				// console.log(item)
				//window.location.href = e;
				window.open(item)
			}
		},
		created() {
			var that=this
			//获得所欲的友链信息
			axios.get("http://"+that.$store.state.host+":8181/blog_friend/findAllFriend").then(function(res){
				that.blog_friends=res.data.map.data
				that.loading=false
			});
		}
	}
</script>

<style>
</style>
